<script setup lang="ts">
import {computed, ref, onBeforeMount} from "vue";
import {zhCN, dateZhCN, darkTheme} from 'naive-ui'

import LoadingContent from "@components/LoadingContent";
import DialogContent from "@components/DialogContent";
import MessageContent from "@components/MessageContent";
import NotificationContent from "@components/NotificationContent";
import highlight from 'highlight.js';
import {appThemeColors} from '@/config'
import {UseAppStore} from '@/stores/app.ts'
import {hexToRgba} from "@/utils";

const appStore = UseAppStore();

const itemChildActiveColor = ref(hexToRgba(appThemeColors.primaryColor, 0.1))

//菜单样式
const menuStyle = computed(() => {
  // const whiteColor = '#FFF'
  // if (appStore.menuStyle == 1 || appStore.menuStyle == 2) {
  //   return {
  //     // itemTextColorActive: whiteColor,
  //     // itemIconColorActive: whiteColor,
  //     // itemColorActive: appThemeColors.primaryColor,
  //
  //     // itemColorActiveHover: appThemeColors.primaryColor,
  //     // itemTextColorActiveHover: whiteColor,
  //     // itemIconColorActiveHover: whiteColor,
  //     // arrowColorHover: whiteColor,
  //
  //     // itemColorHover: appThemeColors.primaryColor,
  //     // itemTextColorHover: whiteColor,
  //     // itemIconColorHover: whiteColor,
  //
  //     // itemColorActiveCollapsed: appThemeColors.primaryColor,
  //
  //     // itemTextColorChildActiveHover: whiteColor,
  //     // itemIconColorChildActiveHover: whiteColor,
  //     // arrowColorChildActiveHover: whiteColor,
  //
  //     // itemIconColorChildCollapsed: whiteColor,
  //   }
  // } else {
  //   return {
  //     itemColorHoverInverted: hexToRgba(appThemeColors.primaryColor, 0.6),
  //   }
  // }
  return {
    itemColorHoverInverted: hexToRgba(appThemeColors.primaryColor, 0.6),
  }
})

//通用配置
const commonThemeOverrides = {
  common: {
    primaryColor: appThemeColors.primaryColor,
    primaryColorHover: appThemeColors.primaryColorHover,
    primaryColorPressed: appThemeColors.primaryColorPressed,
    primaryColorSuppl: appThemeColors.primaryColorSuppl,
    //成功
    successColor: appThemeColors.successColor,
    successColorHover: appThemeColors.successColorHover,
    successColorPressed: appThemeColors.successColorPressed,
    successColorSuppl: appThemeColors.successColorSuppl,

    //警告
    warningColor: appThemeColors.warningColor,
    warningColorHover: appThemeColors.warningColorHover,
    warningColorPressed: appThemeColors.warningColorPressed,
    warningColorSuppl: appThemeColors.warningColorSuppl,

    //失败
    errorColor: appThemeColors.errorColor,
    errorColorHover: appThemeColors.errorColorHover,
    errorColorPressed: appThemeColors.errorColorPressed,
    errorColorSuppl: appThemeColors.errorColorSuppl,

    //info
    infoColor: appThemeColors.infoColor,
    infoColorHover: appThemeColors.infoColorHover,
    infoColorPressed: appThemeColors.infoColorPressed,
    infoColorSuppl: appThemeColors.infoColorSuppl,

    invertedColor: appThemeColors.menuInvertedColor,//左侧菜单背景颜色

    heightMini: "14px",
    heightTiny: "20px",
    heightSmall: "26px",
    heightMedium: "32px",
    heightLarge: "38px",
    heightHuge: "44px",
    borderRadius: "4px",
  },
  Dropdown: {
    optionTextColorHover: appThemeColors.primaryColor,
  },
  Tag: {
    heightMedium: "22px",
  },
  Menu: {
    fontSize: "16px",
    itemHeight: "38px",
  },
  Select: {
    optionHeightSmall: '26px'   // 对应 size="small"
  }
}
//亮色模式
const lightThemeOverrides = computed(() => {
  const common = JSON.parse(JSON.stringify(commonThemeOverrides));
  const colors = {
    textColorBase: "#475569",
    textColor1: "#475569",
    textColor2: "#475569",
    textColor3: "#475569",
  }
  common.common = {...common.common, ...colors};
  common.Menu = {
    ...common.Menu,
    itemTextColor: "#606266",
    itemIconColor: "#606266",
    itemIconColorCollapsed: "#606266",
    ...menuStyle.value,
  };
  return common
})
//暗色模式
const darkThemeOverrides = computed(() => {
  const common = JSON.parse(JSON.stringify(commonThemeOverrides));
  common.Menu = {
    ...common.Menu,
    itemTextColor: "#606266",
    itemIconColor: "#606266",
    itemIconColorCollapsed: "#606266",
    ...menuStyle.value,
  };
  return common
})

onBeforeMount(() => {
  if (appStore.appTheme == 'dark') {
    document.documentElement.classList.add("dark")
  } else {
    document.documentElement.classList.remove("dark")
  }
})

</script>
<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN"
                     :theme-overrides="appStore.appTheme=='light'?lightThemeOverrides:darkThemeOverrides"
                     :theme="appStore.appTheme=='dark'?darkTheme:null" :hljs="highlight">
    <n-loading-bar-provider>
      <LoadingContent/>
      <n-dialog-provider>
        <DialogContent/>
        <n-notification-provider container-style="top:40px">
          <NotificationContent/>
          <n-message-provider>
            <MessageContent/>
            <router-view/>
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
    <n-global-style/>
  </n-config-provider>
</template>

<style lang="scss">
#app {
  height: 100vh;
  min-width: 1370px;
}

//.n-menu--collapsed .n-menu-item .n-menu-item-content--child-active .n-menu-item-content__icon {
//  color: #ffffff !important;
//}

.n-menu--collapsed .n-menu-item .n-menu-item-content--child-active::before {
  background-color: v-bind(itemChildActiveColor) !important;
}
</style>
